https://mp.weixin.qq.com/s/-7RBED080u2AKIU_c6kKhg
老的商品组件，之前都是一次性返回端数据，之前数据量少没什么问题，但是当数据量超过10万的时候页面会很卡顿。
解决方案

1.分堆分组+定时器渲染的方式，一次性分成10条，分1万堆数据，
这种方式，相当于在很短的时间内创建许多个定时任务去处理，定时任务太多了，也耗费资源啊。

2.使用requestAnimationFrame替代定时器去做渲染
requestAnimationFrame是一种浏览器提供的API，它允许我们在浏览器的下一次重绘之前执行JavaScript代码。
这样可以避免浏览器反复重绘，并提供更流畅的动画效果。
https://mp.weixin.qq.com/s/ogQO1XkKVXbARKC6WxeIRQ

3.表格滚动触底加载（滚动到底，再加载一堆）

4.最终解决方案，采用分页加虚拟列表实现，由于项目使用的antd4 虚拟列表使用react-window实现，
现在antd5可以直接通过 virtual 开启虚拟滚动，此时 scroll.x 与 scroll.y 必须设置且为 number 类型。


虚<!-- 拟列表是 -->一种优化技术，用于处理大型数据集或无限数据集的情况。它的原理是延迟加载和部分加载数据，以减少内存占用和提高性能。

传统的列表在加载时会将所有数据一次性加载到内存中，如果数据集非常大，这将导致内存压力过大，甚至可能导致程序崩溃。而虚拟列表则不会一次性加载所有数据，而是根据需要动态加载数据。

<!-- 虚拟列表的实现通常基于以下原理： -->

1. 数据分页：将数据分为多个页面或块，每次只加载当前页面的数据。当用户滚动或导航到下一页时，才会加载下一页的数据。

2. 数据缓存：为了提高性能，虚拟列表通常会对已加载的数据进行缓存。这样，当用户返回到之前访问过的页面时，不需要重新加载数据，而是直接从缓存中获取。

3. 数据预加载：为了提高用户体验，虚拟列表可以在当前页面加载完成后，预加载下一页的数据。这样当用户滚动到下一页时，数据已经提前加载好，可以立即显示。

虚拟列表的优点是可以处理大型数据集，减少内存占用，提高性能和响应速度。但也需要注意，虚拟列表需要合理的数据分页和缓存策略，以及适当的预加载设置，才能达到最佳效果。